{% extends 'base.html' %}

{% load static %}

{% block title %}Post a Reply{% endblock %}

{% block stylesheet %}
    <link rel="stylesheet" href="{% static 'css/simplemde.min.css' %}">
{% endblock %}

{% block javascript %}
    <script src="{% static 'js/simplemde.min.js' %}"></script>
    <script>
        var simplemde = new SimpleMDE();
    </script>
{% endblock %}

{% block breadcrumb %}
    <li class="breadcrumb-item"><a href="{% url 'home' %}">Boards</a></li>
    <li class="breadcrumb-item"><a href="{% url 'board_topics' topic.board.pk %}">{{ topic.board.name }}</a></li>
    <li class="breadcrumb-item"><a href="{% url 'topic_posts' topic.board.pk topic.pk %}">{{ topic.subject }}</a></li>
    <li class="breadcrumb-item active">Post a reply</li>
{% endblock %}

{% block content %}

    <form method="post" class="mb-4" novalidate>
        {% csrf_token %}
        {% include 'includes/form.html' %}
        <button type="submit" class="btn btn-success">Post a reply</button>
    </form>

    {% for post in topic.get_last_ten_posts %}
        <div class="card mb-2">
            <div class="card-body p-3">
                <div class="row mb-3">
                    <div class="col-6">
                        <strong class="text-muted">{{ post.created_by.username }}</strong>
                    </div>
                    <div class="col-6 text-right">
                        <small class="text-muted">{{ post.created_at }}</small>
                    </div>
                </div>
                {{ post.get_message_as_markdown }}
            </div>
        </div>
    {% endfor %}

{% endblock %}